<template>
  <el-col
    :class="className"
    :span="config.span"
  >
    <div class="sort-icon-wrap mover">
      <el-icon size="20">
        <TablerGripHorizontal />
      </el-icon>
    </div>
    <!-- 动态表格设计模块 start -->
    <template v-if="currentItem?.typeId === 'SUB_FORM'">
      <div
        class="batch-box"
        @click="emit('activeItem', currentItem)"
      >
        <div class="batch-label">
          <div v-html="config.label"></div>
          <span class="desc-text">{{ $t("formgen.formItemLayout.desc") }}</span>
        </div>
        <div class="draggable-box">
          <draggable
            :id="currentItem.formId"
            v-model="currentItem.childList"
            :move="handleMove"
            class="list-main"
            item-key="vModel"
            tag="div"
            v-bind="{
              group: insertAllowed ? 'componentsGroup' : '',
              ghostClass: 'moving',
              animation: 180,
              handle: '.sub-drag-move'
            }"
            @start="handleSubFormStart"
            @end="handleSubFormEnd"
            @change="handleChange($event, currentItem)"
          >
            <template #item="{ element, index }">
              <div
                :key="element.vModel"
                :class="activeId === element.config.formId ? 'active-from-item' : ''"
                class="drag-move"
                @click.stop="activeChildItem(element, index, currentItem)"
              >
                <form-item
                  :key="element.renderKey"
                  :current-item="element"
                  class="form-item"
                />
                <div class="drawing-item-operation-wrap">
                  <span
                    class="drawing-item-copy mover sub-drag-move"
                    :title="$t('formI18n.all.copy')"
                  >
                    <el-icon><ele-Rank /></el-icon>
                  </span>
                  <span
                    class="drawing-item-copy"
                    :title="$t('formI18n.all.copy')"
                    @click="copyChildItem(element)"
                  >
                    <el-icon><TablerCopy /></el-icon>
                  </span>
                  <span
                    class="drawing-item-delete"
                    :title="$t('formI18n.all.delete')"
                    @click="deleteChildItem(index)"
                  >
                    <el-icon><TablerTrash /></el-icon>
                  </span>
                </div>
              </div>
            </template>
          </draggable>
        </div>
      </div>
    </template>
    <template v-else>
      <Suspense>
        <template #default>
          <form-item
            :index="index"
            :key="currentItem?.renderKey"
            :current-item="currentItem"
            class="default-component-item form-item"
            @change="emit('change', currentItem)"
            @click="emit('activeItem', currentItem)"
          />
        </template>
        <template #fallback>
          <div class="pl20">
            <el-skeleton
              :rows="1"
              style="width: 45%"
            />
          </div>
        </template>
      </Suspense>
    </template>
    <div class="drawing-item-operation-wrap">
      <span
        class="drawing-item-copy"
        :title="$t('formI18n.all.copy')"
        @click="emit('copyItem', currentItem)"
      >
        <el-icon
          color="#484848"
          size="18"
        >
          <TablerCopy />
        </el-icon>
      </span>
      <span
        class="drawing-item-plus"
        :title="$t('form.examConfig.addQuestions')"
        @click="handleAddToQuestionBank(currentItem)"
      >
        <el-icon
          color="#484848"
          size="18"
        >
          <!-- 图标问题 -->
          <!-- <TablerTagsFilled /> -->
        </el-icon>
      </span>
      <span
        class="drawing-item-delete"
        :title="$t('formI18n.all.delete')"
        @click="emit('deleteItem', currentItem)"
      >
        <el-icon
          color="#484848"
          size="18"
        >
          <TablerTrash />
        </el-icon>
      </span>
    </div>
  </el-col>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import draggable from "vuedraggable";
import FormItem from "./FormItem.vue";
import { cloneDeep, toLower } from "lodash-es";
import TablerGripHorizontal from "~icons/tabler/grip-horizontal";
import TablerCopy from "~icons/tabler/copy";
import TablerTrash from "~icons/tabler/trash";
// import TablerTagsFilled from "~icons/tabler/tags-filled";
//图标问题
const props = defineProps({
  currentItem: Object,
  activeId: [String, Number],
  index: Number
});
const emit = defineEmits(["change", "activeItem", "copyItem", "deleteItem", "addBank"]);

const insertAllowed = ref(true);

const config = computed<any>(() => props.currentItem?.config);

const className = computed(() => {
  return props.activeId === config?.value.formId ? "drawing-item active-from-item" : "drawing-item";
});

const activeChildItem = (child: any, index: number, currentItem: any) => {
  child.isChild = true;
  emit("activeItem", child, currentItem);
};

const copyChildItem = (item: any) => {
  let clone = cloneDeep(item);
  clone = createIdAndKey(clone);
  props.currentItem?.childList.push(clone);
  emit("change", props.currentItem);
};

const deleteChildItem = (index: number) => {
  props.currentItem?.childList.splice(index, 1);
  emit("change", props.currentItem);
};

const handleChange = (evt: Event, parent: any) => {
  // 如果有不支持自增表单的组件 可以在这里给他从数组移除
  emit("change", parent);
};

const handleAddToQuestionBank = (item: any) => {
  emit("addBank", item);
};

const handleMove = (e: Event, originalEvent: Event) => {
  // 自增表单组件不允许向外拖拽
  if ((e as any).to.className === "drawing-board") {
    return false;
  }
  return true;
};

const createIdAndKey = (item: any) => {
  const config = item.config;
  config.formId = `${toLower(item.typeId)}-${new Date().getTime()}`;
  config.renderKey = `${config.formId}${+new Date()}`;
  item.vModel = `${config.formId}`;
  return item;
};

const handleSubFormStart = () => {
  // 解决子表单里面组件拖动会导致富文本复制
  let elements = document.querySelectorAll(".mce-content-body");
  elements.forEach(function (element: any) {
    element.style.pointerEvents = "none";
  });
};
const handleSubFormEnd = () => {
  // 解决子表单里面组件拖动会导致富文本复制
  let elements = document.querySelectorAll(".mce-content-body");
  elements.forEach(function (element: any) {
    element.style.pointerEvents = "auto";
  });
};
</script>
